<!-- src/modal/components/ConfirmModal.vue -->
<template>
	<div class="p-6 bg-white rounded-2xl shadow-xl w-full mx-3">
		<h3 class="text-lg font-bold">{{ title }}</h3>
		<p class="mt-4 text-gray-600">{{ message }}</p>
		<div class="mt-4 flex justify-between space-x-2">
			<button
				@click="onCancel"
				class="px-5 py-2 bg-gray-200 rounded-lg hover:bg-gray-300"
			>
			 {{ cancelText }}
			</button>
			<button
				@click="onConfirm"
				class="px-5 py-2 bg-gray-900 text-white rounded-lg hover:bg-black"
			>
				{{ confirmText }}
			</button>
		</div>
	</div>
</template>

<script setup lang="ts">
withDefaults(
  defineProps<{
    title: string;
    message: string;
    confirmText?: string;
    cancelText?: string;
    // 这两个函数将由 useModal Hook 注入
    onConfirm: () => void;
    onCancel: () => void;
  }>(),
  {
    confirmText: '确认',
    cancelText: '取消',
  }
);
</script>
